// 父组件，子组件，props，默认插槽，具名插槽
function Detail({content,active}){
    return (
        <>
        <div>{content}</div>
        <p>状态：{active ? "激活" : "隐藏"}</p>
        </>
    )
}
function Article({children, title, detailData, footer}){
    return (
        <>
            <div>{title}</div>
            <Detail {...detailData}></Detail>
            {children}
            {footer}
        </>
    )
}
export default function Props(){
    const articleData = {
        title: "1",
        
        detailData:{
            content: "内容",
            active: true
        }
    }
    return (
        <Article {...articleData} footer={<p>这是页面底部</p>}>
            <p>测试插槽</p>
        </Article>
    )
}